<template>
  <view class="list-item-top">
    <view class="list-item-top-left">
      <view>{{ orderitem.created_at | timestampToTime }}</view>
    </view>
    <view class="list-item-top-right" :style="{color: orderStatus.color}">{{ orderStatus.str }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: {},
    },
  },
  filters: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let y = date.getFullYear();
      let M = month ? "0" + month : month;
      let d = day < 10 ? "0" + day : day;
      let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${y}-${M}-${d} ${h}:${m}:${s}`;
    },
  },
  computed: {
    orderStatus() {
      let str = this.$t('person.status2'),
        color = "#F7271F";
      if (this.orderitem.is_pay == 0) {
        str = this.$t('person.status1');
      } else {
        str = this.$t('person.status4');
        color = "#8C8C8C";
      }
      return { str, color };
    },
  }
};
</script>

<style lang="scss" scoped>
.list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list-item-top-left {
    display: flex;
    align-items: center;

    view {
      margin: 0rpx 10rpx;
      font-size: 28rpx;
      color: #262626;
      line-height: 44rpx;
    }

    image:first-child {
      width: 28rpx;
      height: 28rpx;
    }

    image:last-child {
      width: 12rpx;
      height: 20rpx;
    }
  }

  .list-item-top-right {
    font-size: 26rpx;
    color: #f23030;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 30rpx;
    }
  }
}
</style>
